<template>
  <div>
    <!--面包屑-->
    <div style="height: 30px;width: 98%;background-color: white;padding-top: 13px;padding-left: 2%;">
      <i class="el-icon-s-home lf" style="font-size: 18px;margin-right: 10px;"></i>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item >首页</el-breadcrumb-item>
        <el-breadcrumb-item >典当物品管理</el-breadcrumb-item>
        <el-breadcrumb-item >新增物品评估记录</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!--总物品详情-->
    <div style="padding: 20px;min-height: 863px;">
      <!--小标题-->
      <div style="min-height: 90%;width: 100%;">
        <i class="el-icon-s-grid lf" style="font-size: 26px;font-weight: bold;margin-top: 10px;margin-left: 8px;margin-right: 20px;"></i>
        <div style="border: #d7d7d7 1px solid;border-bottom: none;background-color: #CCCCCC;height: 40px;;width: 98.2%;padding-top: 8px;padding-left: 1.85%;">
          <span style="font-size: 20px;font-weight: 500;color: black;">评估记录</span>
          <i class="el-icon-close rf" @click="$router.push('/goods')" style="font-size: 26px;font-weight: bold;font-weight:bold;margin-right: 20px;"></i>
        </div>
      </div>
      <!--物品信息-->
      <div class="cl" style="width: 100%;font-size: 20px;height: 100%;border: #d7d7d7 1px solid;background-color: #E4E4E4;">
        <!--左小标题-->
        <div class="lf" style="height: 100%;width: 20%;border: 1px solid #E4E4E4;"></div>
        <!--右物品内容-->
        <div class="lf" style="border-left: 2px solid #CCCCCC;width: 80%;height: 100%;padding-left: 15%;width: 60%;">
          <!--主要内容-->
          <div style="margin-top: 60px;">
            <div>
              <span style="margin-left: 10px;">来源门店 </span>
              <el-input
                style="width: 350px;margin-left: 24px;margin-bottom: 30px;"
                placeholder="请输入来源门店"
                v-model="goods.shopName"
                disabled>
              </el-input>
            </div>
            <div>
              <span style="margin-left: 30px;">提交人 </span>
              <el-input
                style="margin-left: 24px;width: 350px;margin-bottom: 30px;"
                placeholder="请输入提交人"
                v-model="goods.inputUser"
                disabled>
              </el-input>
            </div>
            <div>
              <span style="margin-left: 10px;">提交时间 </span>
              <el-input
                style="margin-left: 24px;width: 350px;margin-bottom: 30px;"
                placeholder="请输入提交时间"
                v-model="goods.inputTime"
                disabled>
              </el-input>
            </div>
            <div class="cl">
              <div class="lf">
                <div class="lf" style="line-height: 60px;text-align: center;margin-left: -560px;height: 60px;width: 340px;background-color: #D7D7D7;">
                  物品信息
                </div>
                <i style="margin-top: -16px;margin-left: -256px;font-size: 95px;color: #D7D7D7;" class="el-icon-caret-right lf"></i>
              </div>
              <div>
                <span style="margin-left: 10px;">物品类别 </span>
                <el-input
                  style="margin-left: 24px;width: 350px;margin-bottom: 30px;"
                  placeholder="请输入物品类别"
                  v-model="goods.route"
                  disabled>
                </el-input>
              </div>
            </div>
            <div>
              <span style="margin-left: 10px;">物品名称 </span>
              <el-input
                style="margin-left: 24px;width: 350px;margin-bottom: 30px;"
                placeholder="请输入物品名称"
                v-model="goods.goodsName"
                disabled>
              </el-input>
            </div>
            <div>
              <span style="margin-left: 10px;">物品品牌 </span>
              <el-input
                style="width: 350px;margin-bottom: 30px;margin-left: 24px;"
                placeholder="请输入品牌名称"
                v-model="goods.brandName"
                disabled>
              </el-input>
            </div>
            <div style="margin-bottom: 60px;" class="cl">
              <div>
                <span style="margin-left: 10px;">物品描述 </span>
              </div>
              <div class="lf">
                <el-input
                  type="textarea"
                  style="width: 350px;
                    margin-left: 120px;margin-top: -20px;"
                  :autosize="{ minRows: 8, maxRows: 10}"
                  placeholder="请输入物品描述"
                  v-model="goods.goodsDesc"
                  disabled>
                </el-input>
              </div>
            </div>
            <div class="cl">
              <div class="lf">
                <div class="lf" style="line-height: 60px;text-align: center;margin-left: -560px;height: 60px;width: 340px;background-color: #D7D7D7;">
                  物品属性
                </div>
                <i style="margin-top: -16px;margin-left: -256px;font-size: 95px;color: #D7D7D7;" class="el-icon-caret-right lf"></i>
              </div>
              <div
              style="margin-left: 20px;margin-bottom: 40px;"
              v-for="n in attrInfo">
                <span style="margin-left: 23px;">{{n.attributeName}}：</span>
                <el-input
                  v-if="n.attributeType==0"
                  style="margin-left: 6px;width: 350px;margin-bottom: 20px;"
                  placeholder="请输入属性值"
                  v-model="n.value"
                  disabled>
                </el-input>
                <template v-if="n.attributeType==1">
                  <el-radio
                    disabled
                    v-for="m in n.choices"
                    v-model="n.value"
                    :key="m" :label="m">{{m}}</el-radio>
                </template>
                <template v-if="n.attributeType==2">
                  <el-checkbox
                    disabled
                    v-for="m in n.choices"
                    v-model="n.value"
                    :key="m" :label="m">{{m}}</el-checkbox>
                </template>
              </div>
            </div>
            <div class="cl" style="margin-top: 20px;margin-bottom: 60px;">
              <div class="lf">
                <div class="lf" style="line-height: 60px;text-align: center;margin-left: -560px;height: 60px;width: 340px;background-color: #D7D7D7;">
                  物品图片
                </div>
                <i style="margin-top: -16px;margin-left: -256px;font-size: 95px;color: #D7D7D7;" class="el-icon-caret-right lf"></i>
                <div v-for="(k,v) in goods.picture" style="margin-right: 20px;margin-bottom: 30px;" class="lf" :key="k">
                  <p style="margin-bottom: 10px;margin-left: 70px;">{{v}}</p>
                  <div class="demo-image__preview">
                    <el-image
                      style="width: 200px; height: 200px"
                      :src="k"
                      :preview-src-list="pictureList">
                    </el-image>
                  </div>
                </div>
              </div>
            </div>
            <div class="cl">
              <div class="lf">
                <div class="lf" style="line-height: 60px;text-align: center;margin-left: -560px;height: 60px;width: 340px;background-color: #D7D7D7;">
                  最新鉴定记录
                </div>
                <i style="margin-top: -16px;margin-left: -256px;font-size: 95px;color: #D7D7D7;" class="el-icon-caret-right lf"></i>
               <div class="cl">
                  <span class="lf" style="margin-left: 10px;">新旧程度 </span>
                  <el-input
                    class="lf"
                    style="margin-left: 24px;width: 350px;margin-bottom: 30px;"
                    placeholder="请输入物品新旧程度"
                    v-model="record.goodsQuality"
                    disabled>
                  </el-input>
                  <el-button :disabled="oldLength==0" @click="isShow=true" size="medium" class="lf" style="font-size: 18px;border-radius: 0%;background-color: #666666;margin-left: 60px;"
                  type="info">历史鉴定({{oldLength}}条)</el-button>
                </div>
              </div>
            </div>
            <div style="margin-bottom: 30px;" class="cl">
              <div>
                <span style="margin-left: 45px;">备注 </span>
              </div>
              <div class="lf">
                <el-input
                  type="textarea"
                  style="width: 565px;
                    margin-left: 115px;margin-top: -20px;"
                  :autosize="{ minRows: 8, maxRows: 10}"
                  placeholder="请输入鉴定记录备注"
                  v-model="record.remark"
                  disabled>
                </el-input>
              </div>
            </div>
            <div style="margin-bottom: 30px;" class="cl">
              <div>
                <span class="lf" style="margin-left: 10px;">鉴定结果 </span>
              </div>
              <div class="lf">
                <el-input
                  class="lf"
                  style="margin-left: 24px;width: 350px;margin-bottom: 30px;"
                  placeholder="请输入鉴定结果"
                  v-model="record.appraisalResult"
                  disabled>
                </el-input>
              </div>
            </div>
            <!--评估记录-->
            <div class="cl">
              <div class="lf">
                <div class="lf" style="line-height: 60px;text-align: center;margin-left: -560px;height: 60px;width: 340px;background-color: #D7D7D7;">
                  估价记录
                </div>
                <i style="margin-top: -16px;margin-left: -256px;font-size: 95px;color: #D7D7D7;" class="el-icon-caret-right lf"></i>
                <div class="cl">
                  <span class="lf" style="margin-left: 30px;">官方价 </span>
                  <el-input
                    class="lf"
                    style="margin-left: 24px;width: 350px;margin-bottom: 30px;"
                    placeholder="请输入物品官方价"
                    v-model="value.officialPrice"
                    clearable>
                  </el-input>
                  <el-button :disabled="oldValueLength==0" @click="isShow2=true" size="medium" class="lf" style="font-size: 18px;border-radius: 0%;background-color: #666666;margin-left: 60px;"
                  type="info">历史估价({{oldValueLength}}条)</el-button>
                </div>
              </div>
            </div>
            <div style="margin-bottom: 30px;" class="cl">
              <div>
                <span class="lf" style="margin-left: 30px;">评估价 </span>
              </div>
              <div class="lf">
                <el-input
                  class="lf"
                  style="margin-left: 24px;width: 350px;"
                  placeholder="请输入评估价"
                  v-model="value.valuePrice"
                  clearable>
                </el-input>
              </div>
            </div>
            <div style="margin-bottom: 30px;" class="cl">
              <div>
                <span class="lf" style="margin-left: 30px;">典当价 </span>
              </div>
              <div class="lf">
                <el-input
                  class="lf"
                  style="margin-left: 24px;width: 350px;"
                  placeholder="请输入典当价"
                  v-model="value.pawnPric"
                  clearable>
                </el-input>
              </div>
            </div>
            <div style="margin-bottom: 30px;" class="cl">
              <div>
                <span class="lf" style="margin-left: 30px;">收购价 </span>
              </div>
              <div class="lf">
                <el-input
                  class="lf"
                  style="margin-left: 24px;width: 350px;"
                  placeholder="请输入收购价"
                  v-model="value.purchasePrice"
                  clearable>
                </el-input>
              </div>
            </div>
            <div style="margin-bottom: 30px;" class="cl">
              <div>
                <span style="margin-left: 45px;">备注 </span>
              </div>
              <div class="lf">
                <el-input
                  type="textarea"
                  style="width: 565px;
                    margin-left: 115px;margin-top: -20px;"
                  :autosize="{ minRows: 8, maxRows: 10}"
                  placeholder="请输入估价记录备注"
                  v-model="value.remark"
                  clearable>
                </el-input>
              </div>
            </div>
            <el-button @click="addValue" size="medium" class="lf" style="margin-bottom: 30px;font-size: 18px;border-radius: 0%;background-color: #666666;margin-left: 30%;"
            type="info">估价确认</el-button>
          </div>
        </div>
      </div>
    </div>
    <!--历史鉴定记录-->
    <el-dialog :visible.sync="isShow" >
      <!--小标题-->
      <div style="min-height: 90%;width: 100%;">
        <i class="el-icon-s-grid lf" style="font-size: 26px;font-weight: bold;margin-top: 10px;margin-left: 8px;margin-right: 20px;"></i>
        <div style="border: #d7d7d7 1px solid;border-bottom: none;background-color: #CCCCCC;height: 40px;;width: 98%;padding-top: 8px;padding-left: 1.85%;">
          <span style="font-size: 20px;font-weight: 500;color: black;">历史鉴定记录</span>
          <i class="el-icon-close rf" style="font-size: 26px;font-weight: bold;font-weight:bold;margin-right: 20px;"></i>
        </div>
      </div>
      <!--物品信息-->
      <div style="width: 100%;font-size: 20px;height: 100%;border: #d7d7d7 1px solid;background-color: #E4E4E4;">
        <div style="border-left: 2px solid #CCCCCC;width: 98%;height: 100%;padding: 2%;">
          <el-table :data="oldRecord"
          :row-style="{height:'46px'}"
          :header-cell-style="tableHeader"
          border
          style="width: 97%;border: #797979 1px solid;"
          :cell-style="{borderColor:'#797979',margin:'0',padding:'0'}">
            <el-table-column align="center" property="appraisalResult" label="真假" width="150"></el-table-column>
            <el-table-column align="center" property="goodsQuality" label="新旧程度" width="200"></el-table-column>
            <el-table-column align="center"property="createBy" label="评估人"></el-table-column>
            <el-table-column align="center"property="createTime" label="鉴定时间"></el-table-column>
            <el-table-column align="center"property="remark" label="备注"></el-table-column>
          </el-table>
        </div>
      </div>
    </el-dialog>
    <!--历史评估记录-->
    <el-dialog :visible.sync="isShow2" >
      <!--小标题-->
      <div style="min-height: 90%;width: 100%;">
        <i class="el-icon-s-grid lf" style="font-size: 26px;font-weight: bold;margin-top: 10px;margin-left: 8px;margin-right: 20px;"></i>
        <div style="border: #d7d7d7 1px solid;border-bottom: none;background-color: #CCCCCC;height: 40px;;width: 98%;padding-top: 8px;padding-left: 1.85%;">
          <span style="font-size: 20px;font-weight: 500;color: black;">历史评估记录</span>
          <i class="el-icon-close rf" style="font-size: 26px;font-weight: bold;font-weight:bold;margin-right: 20px;"></i>
        </div>
      </div>
      <!--物品信息-->
      <div style="width: 100%;font-size: 20px;height: 100%;border: #d7d7d7 1px solid;background-color: #E4E4E4;">
        <div style="border-left: 2px solid #CCCCCC;width: 98%;height: 100%;padding: 2%;">
          <el-table :data="oldValueRecord"
          :row-style="{height:'46px'}"
          :header-cell-style="tableHeader"
          border
          style="width: 97%;border: #797979 1px solid;"
          :cell-style="{borderColor:'#797979',margin:'0',padding:'0'}">
            <el-table-column align="center" property="officialPrice" label="官方价" width="150"></el-table-column>
            <el-table-column align="center" property="valuePrice" label="评估价" width="200"></el-table-column>
            <el-table-column align="center"property="createBy" label="评估人"></el-table-column>
            <el-table-column align="center"property="createTime" label="评估时间"></el-table-column>
            <el-table-column align="center"property="remark" label="备注"></el-table-column>
          </el-table>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default{
    name:"SurveyGoods",
    data(){
      return{
        //路由传输过来的对象
        goods:{},
        //选中属性组对应的属性集合
        attrInfo:[],
        //所有鉴定图地址集合
        pictureList:[],
        //保存的鉴定记录
        record:{},
        //历史鉴定记录
        oldRecord:{},
        //是否显示历史鉴定记录
        isShow:false,
        //历史鉴定记录条数
        oldLength:0,
        //估价记录
        value:{},
        //是否显示历史估价记录
        isShow2:false,
        //历史估价记录条数
        oldValueLength:0,
        //历史评估记录
        oldValueRecord:[]
      }
    },
    methods:{
      /**
       * 表格表头样式
       */
      tableHeader({ row, column, rowIndex, columnIndex }){
        if (rowIndex === 0) {
          return 'padding:0;color:#333333;font-size:18px;font-weight: 500;height: 40px;margin-top: 85px;border-color:#797979;'
        }
      },
      /**
       * 根据物品id查询最新鉴定记录
       */
      findNewExecuteByGoodsId(){
        let id = this.goods.goodsId
        this.$http.get("/goods/goodsAppraisalRecords/findNewExecuteByGoodsId",{
          params:{
            goodsId:id
          }
        }).then(resp=>{
          if(resp.data.code!=200){
            this.$message({
              message: resp.data.message,
              showClose: true,
              type: 'error'
            });
          }else{
            this.record = resp.data.data
            this.oldRecord = this.record.old
            if(this.oldRecord!=null){
              this.oldLength = this.oldRecord.length
            }
          }
        })
      },
      /**
       * 新增估价记录
       * @param {Object} n 估价结果
       */
      addValue(){
        if(this.value.officialPrice==null||undefined){
          this.$message({
            message: "官方价不能为空",
            showClose: true,
            type: 'error'
          });
          return;
        }else if(this.value.valuePrice==null||undefined){
          this.$message({
            message: "评估价不能为空",
            showClose: true,
            type: 'error'
          });
          return;
        }else if(this.value.pawnPric==null||undefined){
          this.$message({
            message: "典当价不能为空",
            showClose: true,
            type: 'error'
          });
          return;
        }else if(this.value.purchasePrice==null||undefined){
          this.$message({
            message: "售卖价不能为空",
            showClose: true,
            type: 'error'
          });
          return;
        }
        console.log(this.value)
        this.$http.post("/goods/goodsValueRecords/addValue",this.value).then(resp=>{
          if(resp.data.code!=200){
            this.$message({
              message: resp.data.message,
              showClose: true,
              type: 'error'
            });
          }else{
            this.$message({
              message: resp.data.message,
              showClose: true,
              type: 'success'
            });
            this.$router.push("/dealGoods")
          }
        })
      },
      /**
       * 获取路由参数对象
       */
      param(){
        this.goods = this.$route.params
        console.log(this.goods)
        let map = this.goods.picture
        console.log(map)
        for(let k in map){
          this.pictureList.push(map[k])
        }
        this.value.goodsId = this.goods.goodsId
        this.findConfigByGroupId()
        this.findNewExecuteByGoodsId()
        this.findValueByGoodsId()
      },
      /**
       * 通过物品id查询历史评估记录
       */
      findValueByGoodsId(){
        let id = this.goods.goodsId
        this.$http.get("/goods/goodsValueRecords/findValueByGoodsId",{
          params:{
            goodsId:id
          }
        }).then(resp=>{
          if(resp.data.code!=200){
            this.$message({
              message: resp.data.message,
              showClose: true,
              type: 'error'
            });
          }else{
            this.oldValueRecord = resp.data.data
            if(this.oldValueRecord!=null){
              this.oldValueLength = this.oldValueRecord.length
            }
          }
        })
      },
      /**
       * 通过选定属性组id查询对应的属性集合
       * @param {Object} id 属性组id
       */
      findConfigByGroupId(){
        let id = this.goods.groupId
        this.$http.get("/goods/attributeConfig/findConfigByGroupId",{
          params:{
            groupId:id
          }
        }).then(resp=>{
          if(resp.data.code!=200){
            this.$message({
              message: resp.data.message,
              showClose: true,
              type: 'error'
            });
          }else{
            let data = resp.data.data
            this.attrInfo = []
            for (var i = 0; i < data.length; i++) {
              let info = data[i].infoDto
              info.value = this.goods.attrMap[info.attributeId]
              this.attrInfo.push(info)
            }
          }
        })
      },
    },
    activated(){
      this.param()
    }
  }
</script>

<style>
  .cl::after{
    content: '';
    display: block;
    clear: both;
  }
  .lf{
  	float: left;
  }
  .rf{
  	float: right;
  }
  .el-input.is-disabled .el-input__inner{
    font-size: 18px;
    background-color: white;
    color: dimgrey;
  }
  .el-input__inner{
    font-size: 18px;
  }
  .el-textarea.is-disabled .el-textarea__inner{
    background-color: white;
    font-size: 18px;
    color: dimgrey;
  }
  .el-textarea__inner{
    font-size: 18px;
  }
  .el-radio__input.is-disabled+span.el-radio__label{
    font-size: 18px;
    color: dimgrey;
  }
  .el-checkbox__input.is-disabled+span.el-checkbox__label{
    font-size: 18px;
    color: dimgrey;
  }
  .el-dialog__header{
    padding: 0;
  }
  .el-dialog__body{
    padding: 0;
  }
  .el-table--border::after, .el-table--group::after{
    width: 0;
  }
</style>
